﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddQuestion.aspx.cs" Inherits="Touch2Like.Web.Customer.Popup.AddQuestion"
    ValidateRequest="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="/css/main.css" type="text/css" />
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="/js/jquery.js" type="text/javascript"></script>
    <script src="/js/basic.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            if ($("#ddl_QuestionType").val() == "MultiCheck" || $("#ddl_QuestionType").val() == "SingleCheck") {
                $("#tr_options").css("display", "");
            } else {
                $("#tr_options").css("display", "none");
            }

            $("#ddl_QuestionType").change(function () {
                if ($("#ddl_QuestionType").val() == "MultiCheck" || $("#ddl_QuestionType").val() == "SingleCheck") {
                    $("#tr_options").css("display", "");
                } else {
                    $("#tr_options").css("display", "none");
                }
            });

            $("#form_options button").click(function () {
                if ($.trim($("#form_options :text").val()) == "") {
                    alert("invalid value");
                } else {
                    $("#ul_options").append("<li>" + $.trim($("#form_options :text").val()) + "</li>");
                }

                var vals = "";
                $("#ul_options li").each(function () {
                    vals += $.trim($(this).text()) + "~~~";
                });

                $("#tb_Options").val(vals);
                $("#form_options :text").val("");
            });

            $("#ul").html("");
            if ($.trim($("#tb_Options").val()) != "") {
                var vallist = $.trim($("#tb_Options").val()).split("~~~");
                for (var i = 0; i < vallist.length; i++) {
                    if (vallist[i] != "") {
                        $("#ul_options").append("<li>" + vallist[i] + "</li>");
                    }
                }
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="padding: 8px">
        <table>
            <tr>
                <td align="right">
                    Type:
                </td>
                <td>
                    <asp:DropDownList ID="ddl_QuestionType" runat="server" Height="40px">
                        <asp:ListItem Value="YesNo" Text="YesNo"></asp:ListItem>
                        <asp:ListItem Value="Comment" Text="Comment"></asp:ListItem>
                        <asp:ListItem Value="Rate" Text="Rate"></asp:ListItem>
                        <asp:ListItem Value="MultiCheck" Text="MultiCheck"></asp:ListItem>
                        <asp:ListItem Value="SingleCheck" Text="SingleCheck"></asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td align="right">
                    Question:
                </td>
                <td>
                    <asp:TextBox ID="tb_Question" runat="server" Width="200px"></asp:TextBox>
                </td>
            </tr>
            <tr id="tr_options" style="display: none;">
                <td align="right">
                    options
                </td>
                <td>
                    <ul id="ul_options">&nbsp;
                    </ul>
                    <div id="form_options">
                        <input type="text" runat="server" style="width: 150px;" />
                        <button type="button">
                            add item</button></div>
                    <asp:HiddenField ID="tb_Options" runat="server" />
                </td>
            </tr>
            <tr>
                <td align="right">
                </td>
                <td>
                    <asp:Label ID="lb_Remove" runat="server" Text="Are you sure to remove this question?"
                        Visible="false"></asp:Label>
                    <div style="display: none">
                        <asp:Button ID="btn_Submit" runat="server" CssClass="Submit" Text="Save" OnClick="btn_Submit_Click" />
                        <asp:Button ID="btn_Remove" runat="server" Text="Remove" CssClass="Submit" OnClick="btn_Remove_Click"
                            Visible="false" />
                        <input type="button" class="Submit Cancel" value="Cancel" onclick="parent.hideDialog();"
                            id="btn_Cancel" />
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
